<template>
	<view class="app app-bg">
		<!-- 页面内容开始 -->
		<u-tabs :list="tabs.list" :is-scroll="false" v-model="tabs.index"></u-tabs>
		<view v-if="tabs.index === 0">
			<u-form :model="form1" ref="form1" :label-width="150" input-align="left" :clearable="false">
				<view class="card">
					<view class="content">
						<u-form-item label="姓名" prop="real_name" required>
							<vk-data-input v-model="form1.real_name" placeholder="请输入您的姓名" :clearable="false" :disabled="disabledCom" />
						</u-form-item>
						<u-form-item label="手机号" prop="mobile" required>
							<vk-data-input v-model="form1.mobile" placeholder="请输入您的手机号" :clearable="false" :disabled="disabledCom" />
						</u-form-item>
						<u-form-item label="邀请码" prop="invite_code" required v-if="!options.shop">
							<vk-data-input v-model="form1.invite_code" placeholder="请输入邀请码" :clearable="false" :disabled="inviteCodeDisabledCom || disabledCom" />
						</u-form-item>
						<view v-if="complete && data.inviterUserInfo" class="invite-user">
							<image :src="data.inviterUserInfo.avatar" mode="aspectFill" class="avatar"></image>
							<text class="nickname">{{ data.inviterUserInfo.nickname }}</text>
							<text class="text">邀请您成为推广大使</text>
						</view>
						<u-form-item label="留言" prop="apply_comment" label-position="top">
							<vk-data-input v-model="form1.apply_comment" placeholder="请输入留言，有助于您更快通过商家审核！" type="textarea" input-align="left" style="height: 200rpx;" :maxlength="300" :disabled="disabledCom" />
						</u-form-item>
						<u-alert-tips	v-if="data.fx.status_str"	type="error" :description="'拒绝原因：' + data.fx.status_str" />
					</view>
				</view>

				<view class="footer safe-area-inset-bottom">
					<view class="btn-box">
						<view v-if="data.fx && data.fx.status === 1">
							<u-button class="show" type="success"	@click="vk.redirectTo('./index')">前往业务中心</u-button>
						</view>
						<view v-else>
							<u-button v-if="complete"	class="show" :disabled="disabledCom" :type="statusCom" @click="submit">{{ data.showText }}</u-button>
						</view>
					</view>
				</view>
			</u-form>
		</view>
		<view v-else-if="tabs.index === 1" style="background-color: #ffffff;margin-top: 20rpx;">
			<!-- 说明图 -->
			<view style="padding: 20rpx;">
				<u-parse :html="vk.getVuex('$user.mchInfo.fx.apply_intro')" v-if="vk.getVuex('$user.mchInfo.fx.apply_intro')"></u-parse>
				<view v-else>
					<view style="height: 100rpx;display: block;"></view>
					<view style="text-align: center;width: 100%;display: block;"><view>暂无介绍</view></view>
				</view>
			</view>
		</view>

		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball></vk-data-float-ball>
		<vk-data-loading v-model="loading" delayTime="0"></vk-data-loading>
	</view>
</template>

<script>
var vk = uni.vk; // vk依赖
export default {
	data() {
		// 页面数据变量
		return {
			// init请求返回的数据
			data: {
				fx: {
					is_fx: "",
					status: "",
					status_str: ""
				},
				inviterUserInfo: {},
				showText: "点击申请" //根据是否申请过动态渲染的文字
			},
			// 表单请求数据
			form1: {
				real_name: "", //真实姓名
				mobile: "", //手机号
				invite_code: "", //邀请码
				apply_comment: "", //备注,
			},
			rules1: {
				mobile: [
					{
						validator: (rule, value, callback) => {
							let key = vk.pubfn.test(value, "mobile");
							if (key) {
								callback();
							} else {
								return callback(false);
							}
						},
						message: "手机号格式错误",
						trigger: "blur"
					}
				],
				real_name: [{ required: true, message: "姓名不能为空" }],
				invite_code: [{ required: true, message: "邀请码不能为空" }]
			},
			loading: false,
			complete: false,
			options: {
				code: "",
				scene: ""
			},
			tabs: {
				index: 0,
				list: [
					{ name: "申请" },
					{ name: "介绍" },
				]
			}
		};
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options) {
		vk = uni.vk;
		this.options = options;
		this.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {
		let that = this;
		if (that.$refs.form1) that.$refs.form1.setRules(that.rules1);
	},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 监听 - 点击右上角转发时
	onShareAppMessage(options) {},
	// 函数
	methods: {
		// 页面数据初始化函数
		init(options = {}) {
			let that = this;
			if (!options.code && vk.getVuex("$user.inviteCode")) {
				options.code = vk.getVuex("$user.inviteCode");
			}
			if (options.scene && options.scene.length > 5) {
				options.scene = decodeURIComponent(options.scene);
				options.code = options.scene.substring(5);
			}
			that.form1.invite_code = options.code;
			if (options.code) {
				vk.setVuex("$user.inviteCode", options.code);
			}
			that.options = options;
			that.findStatus();
		},
		// 获取当前的申请状态
		findStatus() {
			let that = this;
			let { options } = that;
			vk.callFunction({
				url: "client/salesman.getStatus",
				data: {
					invite_code: options.code
				},
				loading: true,
				success: data => {
					that.data = data;
					vk.pubfn.objectAssign(that.form1, data.fx);
					that.complete = true;
				}
			});
		},
		// 提交申请
		submit() {
			let that = this;
			// 弹窗输入姓名和手机号留言
			let form1 = that.form1;
			that.$refs.form1.validate(valid => {
				if (valid) {
					// 验证通过执行接口请求
					vk.callFunction({
						url: "client/salesman.applySalesman",
						data: that.form1,
						title: "提交中...",
						success: data => {
							// 成功之后弹窗然后请求别的接口
							that.findStatus();
							vk.alert(data.msg, "提示", function() {
								if (data.autoExamineKey) {
									vk.redirectTo('./index')
								}
							});
							vk.pubfn.requestSubscribeMessage({
								tmplIds: data.tmplIds
							});
						}
					});
				}
			});
		}
	},
	// 计算属性
	computed: {
		// 根据不同的状态来返回不同的颜色值
		statusCom() {
			let { data } = this;
			let { status = -1 } = data.fx;
			let arr = ["primary", "success", "warning", "error"];
			if (status > 0) {
				return arr[status];
			} else {
				return "success";
			}
		},
		disabledCom() {
			let { data } = this;
			let { status = -1 } = data.fx;
			let disabled = true;
			if ([-1, 2].indexOf(status) > -1) {
				disabled = false;
			}
			return disabled;
		},
		inviteCodeDisabledCom() {
			return this.options.code ? true : false;
		}
	}
};
</script>
<style lang="scss" scoped>
.card {
	background-color: #ffffff;
	margin-top: 20rpx;
	.content {
		padding: 20rpx 30rpx;
		.right-text {
			color: #303133;
		}
	}
	.title {
		padding: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		border-bottom: 1px solid #f8f8fa;
		background-color: #ffffff;
	}
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100rpx;
	z-index: 99;
	.btn-box {
		display: flex;
		width: 100%;
		height: 100%;
		align-items: center;
		> view {
			flex: 1;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.secondary-btn {
			background-color: #ffffff;
		}
		.main-btn {
			background-color: #19be6b;
			color: #ffffff;
		}
		.show {
			width: 90%;
		}
	}
}
.invite-user{
	margin-top:20rpx;
	display: flex;
	align-items: center;
	.avatar{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.nickname{
		color: blue;
	}
	.text{
		margin-left: 10rpx;
	}
}
</style>
